<template>
	<view class="container">
		<view class="header">
			<view class="header-top">
				<template v-if="orderInfo.order_status == 0">待付款</template>
				<template v-else-if="orderInfo.order_status == 1 && orderInfo.delivery_status == 0">待发货</template>
				<template v-else-if="orderInfo.order_status == 1 && orderInfo.delivery_status == 1">已发货</template>
				<template v-else-if="orderInfo.order_status == 2 && orderInfo.receipt_status == 0">待收货</template>
				<template v-else-if="orderInfo.order_status == 2 && orderInfo.receipt_status == 1">已收货</template>
				<template v-else-if="orderInfo.order_status == 3 && orderInfo.is_comment == 0">待评价</template>
				<template v-else-if="orderInfo.order_status == 3 && orderInfo.is_comment == 1">已完成</template>
				<template v-else-if="orderInfo.order_status == -1">退款申请中</template>
				<template v-else-if="orderInfo.order_status == -2">已退货</template>
				<template v-else-if="orderInfo.order_status == -3">拒绝</template>
				<template v-else-if="orderInfo.order_status == -4">取消交易</template>
				<template v-else-if="orderInfo.order_status == -5">关闭交易</template>
				<template v-else></template>
			</view>
			<view class="header-bottom">
				<view class="header-bottom-one">{{orderInfo.orderaddress.name}} {{orderInfo.orderaddress.mobile}}</view>
				<view class="header-bottom-two">
					{{orderInfo.orderaddress.province+orderInfo.orderaddress.city+orderInfo.orderaddress.country+orderInfo.orderaddress.detail}}
				</view>
			</view>
		</view>
	
		<view class="cart-box">
			<view class="cart-title">商品信息</view>
			<template v-for="(item, index) in orderInfo.orderitem">
				<view class="cart-item" :key="index">
					<view class="cart-item-main">
						<view class="cart-item-img">
							<image :src="item.image"></image>
						</view>
						<view class="cart-item-word">
							<view class="title-box">
								<text class="title">{{item.name}}</text>
								<text class="price">￥{{item.price}}</text>
							</view>
							<view class="sku-box">
								<text>{{item.props_text}}</text>
							</view>
							<view class="title-box">
								<text class="num">数量:{{item.num}}</text>
							</view>
						</view>
					</view>
				</view>
				
					<!-- <template v-if="orderInfo.pay_status == 1">
						<view v-if="item.refund_type == 0" @click="refund(item.id)" class="pay">申请退款</view>
						<view v-if="item.refund_type == 2" @click="daichuli(item.id)" class="pay">待商家处理</view>
						<view v-if="item.refund_type == 4" @click="success(item.id)" class="pay">退款成功</view>
						<view v-if="item.refund_type == 5" @click="refuse(item.id)" class="pay">商家拒绝退款</view>
						<view v-if="item.refund_type == 10" @click="close(item.id)" class="pay">退款关闭</view>
					</template> -->
			</template>
			
			<!-- <view class="account">
				<view></view>
				<view>包邮</view>
			</view> -->
			<view class="account">
				<view></view>
				<view>商品总价:<text style="color: #ff0000;">￥{{orderInfo.total_price}}</text></view>
			</view>
	
			<view class="order-item-account">
				<view></view>
				<view><text>共1件商品 合计: </text><text>¥{{orderInfo.total_price}}</text></view>
			</view>
		</view>
	
		<view class="order-box">
			<view class="order-title">订单信息</view>
			<view class="order-detail">
				<view class="order-detail-sn1">
					<view>订单编号：<text style="color: #5D5D5D;">{{orderInfo.order_no}}</text> </view>
					<view><text @click="enterCopy" style="color: #000;">复制</text></view>
				</view>
				<view class="order-detail-time">下单时间：<text style="color: #5D5D5D;">{{orderInfo.create_time}}</text></view>
				<template v-if="orderInfo.order_status > 0">
					<view class="order-detail-sn">支付方式：<text style="color: #5D5D5D;">微信支付</text></view>
					<view class="order-detail-time">支付时间：<text style="color: #5D5D5D;">{{orderInfo.pay_time}}</text></view>
					<view class="order-detail-sn">交易单号：<text style="color: #5D5D5D;">{{orderInfo.trade_id}}</text></view>
				</template>
			</view>
			<view class="order-contact">
				<button open-type="contact">
					<image src="@/static/contact.png"></image>
					<text>联系商家</text>
				</button>
			</view>
		</view>
	
		<view class="blank_"></view>
			<view class="order-item-bottom">
				<view class="left"></view>
				<view class="right">
					<template v-if="orderInfo.order_status == 0 && orderInfo.pay_status == 0">
						<view class="pay" @click="payOrder">去付款</view>
						<view class="cancel" @click="cancel">取消订单</view>
					</template>
					<template v-if="orderInfo.order_status == 2 && orderInfo.delivery_status != 0">
						<view class="pay" @click="queryOrder">确认收货</view>
					</template>
				
					<template v-if="orderInfo.order_status == 3 && orderInfo.is_comment == 0">
						<view class="pay" @click="commentOrder">去评价</view>
					</template>
				
					<!-- <template v-if="orderInfo.pay_status == 1">
						<view v-if="item.refund_type == 0" @click="refund(item.id)" class="pay">申请退款</view>
						<view v-if="item.refund_type == 2" @click="daichuli(item.id)" class="pay">待商家处理</view>
						<view v-if="item.refund_type == 4" @click="success(item.id)" class="pay">退款成功</view>
						<view v-if="item.refund_type == 5" @click="refuse(item.id)" class="pay">商家拒绝退款</view>
						<view v-if="item.refund_type == 10" @click="close(item.id)" class="pay">退款关闭</view>
					</template> -->
					
				</view>
			</view>
		
		<view class="blank_"></view>
		<view class="right" v-for="(item, index) in orderInfo.orderitem" v-key="index">
	
		</view>
	
		<view class="tui-actionsheet" :class="showActionSheet.show ? 'tui-actionsheet-show' : 'tui-actionsheet-none'">
			<view class="actionsheet-title">{{showActionSheet.title}}</view>
			<template v-for="(item, index) in showActionSheet.itemList">
			<view :key="index" class="actionsheet-btn-item"	@click="handleClickItem(index)">
				<text>{{item.text}}</text>
				<image v-if="item.show" src="@/static/ok.png"></image>
			</view>
			</template>
			<view class="tui-actionsheet-bottom">
				<view class="actionsheet-cancel" @click="handleClickCancel">取消</view>
				<view class="actionsheet-query" v-if="showActionSheet.showquery" @click="handleClickQuery">确定</view>
				<view class="actionsheet-query-no" v-if="!showActionSheet.showquery"></view>
			</view>
		</view>
		<view class="tui-actionsheet-mask" :class="showActionSheet.show ? 'tui-mask-show' : 'tui-mask-none'" @click="handleClickCancel"></view>
	
	</view>

</template>

<script>
	
	import {Order} from '@/utils/model/order-model.js';
	var order = new Order();
	
	export default {
		data() {
			return {
				orderInfo:{
					orderitem:[]
				},
				orderId: 0,
				showActionSheet: {
					show: false,
					title:'请选择取消原因',
					itemList:[{
						text: '选择错误了',
						show: false
					},{
						text: "收货地址填写错误了",
						show: false
					},{
						text: "价格较贵",
						show: false
					},{
						text: "不想要了",
						show: false
					},{
						text: "其他",
						show: false
					}],
					showquery: false,
					id: 0,//选中取消订单id
				},
			}
		},
		onLoad(options) {
		    this.orderId = options.id;
		},
		onShow(){
		    order.getDetail(this.orderId).then(res => {
		      console.log(res);
		      console.log('3333333333333333333333333333333')
				if(res.code == 1){
					this.orderInfo = res.data.detail
				}
		    })
		},
		
		methods:{
			refund(id){
			    uni.navigateTo({
					url: '/pages/refund/add?id='+id
			    })
			},
			pay(){
				uni.navigateTo({
					url:'/pages/order/pay?id='+this.orderId
				})
			},
			//---------------------------------取消订单 start
			cancel(orderId){
			  this.showActionSheet.show = true;
			  this.showActionSheet.id = orderId;
			  this.showActionSheet = this.showActionSheet
			},
			handleClickCancel(){
			  this.showActionSheet.show = false;
			  this.showActionSheet = this.showActionSheet
			},
			handleClickItem(index){
			  if(!this.showActionSheet.show) return;
			  for(let i  = 0; i < this.showActionSheet.itemList.length; i++){
			    this.showActionSheet.itemList[i].show = false;
			  }
			  this.showActionSheet.itemList[index].show = true;
			  this.showActionSheet.showquery = true;
			  this.showActionSheet = this.showActionSheet
			},
			handleClickQuery(){
			  let that = this;
			  let reason = '';
			  let orderId = 0;//订单id
			  for(let i  = 0; i < this.showActionSheet.itemList.length; i++){
								if(this.showActionSheet.itemList[i].show === true){
									reason = this.showActionSheet.itemList[i].text;
									orderId = this.showActionSheet.id;
								}
			  }
			  
			  if(orderId === 0){
								uni.showModal({
									title: '友情提示',
									content: '请选择取消订单原因',
									showCancel: false,
									success() {
										uni.navigateBack()
									}
								}) 
			    return
			  }
			  
			  order.cancel(orderId, reason).then(res=>{
			    console.log(res)
			    uni.showToast({
			      title: res.message,
			      icon:'none'
			    })
			    that.handleClickCancel();
			  })
			},
			//---------------------------------取消订单 over
		},
	}
</script>


<style>
	page{
		background-color: #EDEDED;
	}
</style>
 
<style scoped lang="scss">
	@import '~@/pages/order/detail.scss';
</style>